<template>
  <div class="body">
    <h3>欢迎光临_vue开发的收银系统_水果店</h3>
    <div class="box1">
      <div class="box2">
        <p>苹果 10￥/斤,折扣 ‹8 折›</p>
      </div>
      <div class="box3">
        <span>请输入你要购买的斤数</span
        ><input type="text" v-model.number="count" />
      </div>
      <div class="box3">
        <button @click="js">结账买单</button>
      </div>
      <div class="box3">
        <span
          >结算账单：总加：{{ zj }}￥ 折后价：{{ zhj }}￥ 省了：{{ sl }}￥</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zj: 0,
      zhj: 0,
      sl: 0,
      count: 0,
    }
  },
  methods: {
    js() {
      this.zj = this.count * 10
      this.zhj = this.zj * 0.8
      this.sl = this.zj - this.zhj
    },
  },
}
</script>

<style lang="less" scoped>
.body {
  text-align: center;
  h3 {
    font-weight: normal;
  }
  .box1 {
    border: 3px double #000;
    .box2 {
      border: 1px double #000;
    }
    .box3 {
      height: 50px;
      border: 1px double #000;
      line-height: 50px;
    }
  }
}
</style>
